<template>
  <div class="item-detail">
    <x-header>详情页<a slot="right"></a></x-header>
    <item-list @remove="handleRemove" :datalist="[detail]" @focusman="handleFocusman" @afterlike="init"></item-list>
    <div class="list-box" style="padding-bottom:60px;">
      <tab :line-width="1" custom-bar-width="60px">
        <tab-item @on-item-click="handleClickTab" :selected="i===0" v-for="(item,i) in tabList" :key="i">{{item.name}}</tab-item>
      </tab>
      <group v-if="detail.cmt.cmts&&detail.cmt.cmts.length>0&&tabIndex===0" class="commentList">
        <cell v-for="(item,i) in detail.cmt.cmts" :key="i">
          <div class="top">
            <div class="left">
              <avatar username="Lairenna" :src="item.creator.avatar"  :size="40"></avatar>
            </div>
            <div class="right">
              <div class="right-1">
                <div class="nickname">{{item.creator.nickname || 'helllo'}}</div>
                <div class="floor">第{{detail.cmt.cmts.length-i}}楼 | {{getTime(item.createTime)}}</div>
                <div class="con">{{item.content}}</div>
              </div>
              <div class="right-2" @click.stop="handleLike(item, i, false)" @dblclick="handleLike(item, i, true)">
                <i class="icon-dianzan"
                  :class="{'no-dianzan': !item.hasLike}"></i>
                <span style="margin-left: 3px" v-if="item.likeNum">{{item.likeNum}}</span>
                <!-- <i v-if="user._id === (detail.creator || {})._id" class="icon-dianzan"></i> -->
              </div>
            </div>
          </div>
        </cell>
      </group>
      <group v-if="detail.likes&&detail.likes.length>0&&tabIndex===1" class="commentList">
        <cell v-for="(item,i) in detail.likes" :key="i">
          <div class="top">
            <div class="left">
              <avatar username="Lairenna" :src="item.creator.avatar" :size="40"></avatar>
            </div>
            <div class="right">
              <div class="right-1">
                <div class="nickname">{{item.creator.nickname || 'helllo'}}</div>
                <div  class="floor">第{{detail.likes.length-i}}楼 {{getTime(item.createTime)}}</div>
              </div>
            </div>
          </div>
       </cell>
      </group>
    </div>
    <actionsheet
      v-model="showConfirm"
      :menus="cacelList"
      show-cancel
      @on-click-menu="click">
    </actionsheet>
    <group class="remark-input" v-show="tabIndex===0">
      <x-input v-model="remarkCon" placeholder="请输入评论内容" @on-enter="handleRemark">
        <avatar slot="label" username="Lairenna" :size="30" :src="detail.creator && detail.creator.avatar"></avatar>
      </x-input>
      <i class="icon-fasong1" @click="handleRemark"></i>
    </group>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import Avatar from 'vue-avatar';
import ItemList from './Item';
import { formatMsgTime } from '../../js/getTime'
import { Actionsheet, Cell, XHeader, Tab, TabItem, Group, XInput } from 'vux';
const IndexStore = namespace('detail');
const HomeStore = namespace('home');
const UserInfo = namespace('login');
@Component({
  components: { Avatar, Actionsheet, Cell, XHeader, Tab, TabItem, Group, XInput, ItemList }
})
export default class ItemDetail extends Vue {
  @IndexStore.Action getCmtPost;
  @HomeStore.Action getWxShare;
  @IndexStore.Action getDetail;
  @IndexStore.State detail;
  @UserInfo.State login;
  @HomeStore.Action getLikePost
  @HomeStore.State WxShare;
  @HomeStore.Action getWatchUser;
  @HomeStore.Action getlikePostMsg;
  user = (localStorage.getItem('loginInfo') && JSON.parse(localStorage.getItem('loginInfo')).user) || ''
  remarkCon = ''
  currentItem = null
  id = null
  showConfirm = false
  tabIndex = 0
  userId = ''
  get tabList () {
    let { cmt, likes } = this.detail
    if (cmt && cmt.cmts) {
      return [
        { name: `评论(${cmt.cmts.length})` },
        { name: `点赞(${likes.length})` }
      ]
    }
  }
  cacelList = {
    1: '举报'
  }
  handleRemove (item) {
    this.currentItem = item
    this.id = item._id
    this.showConfirm = true
  }
  handleFocusman () {
    const params = {
      status: 0
    }
    this.getWatchUser(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.$vux.toast.text('关注成功', 'middle');
      }
    })
  }
  _turntoIndex (item) {
    this.$router.push({
      path: '/personindex',
      query: {
        userId: item.creatorId
      }
    })
  }
  getTime (t) {
    return formatMsgTime(t * 1000)
  }
  handleRemark () {
    if (this.user) {
      if (this.user.nickname) {
        const params = {
          postId: this.$route.params.id,
          cmt: this.remarkCon
        }
        this.getCmtPost(params).then(msg => {
          if (msg) {
            this.$vux.toast.text(msg, 'middle');
          } else {
            this.remarkCon = ''
            this.init()
            this.$vux.toast.text('评论成功', 'middle');
          }
        })
      } else {
        this.$router.push('/personinfo')
      }
    } else {
      this.$router.push('/login')
    }
  }
  handleLike (postObj, i, state) {
    this.getlikePostMsg({_id: postObj._id}).then(res => {
      if (res.code === 0) {
        if (postObj.hasLike) {
          this.$set(this.detail.cmt.cmts[i], 'likeNum', postObj.likeNum - 1);
        } else {
          this.$set(this.detail.cmt.cmts[i], 'likeNum', postObj.likeNum + 1);
        }
        this.$set(this.detail.cmt.cmts[i], 'hasLike', !postObj.hasLike);
      } else {
        this.$vux.toast.text(res.msg || '点赞失败', 'middle');
      }
    })
  }
  init () {
    const params = {
      _id: this.$route.params.id
    }
    this.getDetail(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      }
    })
  }
  created () {
    this.userId = this.user._id
    this.init()
  }
  getShare () {
    const params = {
      'share_url': location.href.split('#')[0]
    };
    this.getWxShare(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        let {appId, timestamp, nonceStr, signature, jsApiList} = this.WxShare.wechat;
        let {share} = this.WxShare;
        this.$wx.config({
          debug: false,
          appId: appId,
          timestamp: timestamp,
          nonceStr: nonceStr,
          signature: signature,
          jsApiList: jsApiList
        });
        this.$wx.ready(() => {
          this.$wx.checkJsApi({
            jsApiList: jsApiList,
            success: function (res) {}
          });
          this.$wx.onMenuShareTimeline({
            title: share.share_title,
            link: share.link,
            imgUrl: share.share_img,
            success: function () {},
            cancel: function () {}
          });
          this.$wx.onMenuShareAppMessage({
            title: share.share_title,
            desc: share.share_describe,
            link: share.link,
            imgUrl: share.share_img,
            type: 'link',
            dataUrl: '',
            success: function () {},
            cancel: function () {}
          })
        })
      }
    })
  }
  handleClickTab (val) {
    this.tabIndex = val
  }
  click (key) {
    if (key === '1') {
      const { creator, _id } = this.currentItem
      const info = {
        _id,
        creator,
        type: 'post'
      }
      this.$router.push({
        path: `/report`,
        query: {
          info
        }
      })
    } else if (key === '2') {
      this.getLikePost({postId: this.$route.params.id}).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.$vux.toast.text('点赞成功', 'middle');
          this.init();
        }
      })
    }
  }
}
</script>
<style lang="less">
  .item-detail {
    padding-top: 51px;
    .remark-input .weui-cell {
      width: 85%;
    }
    .icon-fasong1 {
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 24px;
    }
    .remark-input {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      .weui-input {
        padding-left: 10px;
      }
    }
    .bounce-enter-active {
      animation: bounce-in .3s;
    }
    .bounce-leave-active {
      animation: bounce-in .3s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
    .img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 200px;
      min-height: 70px;
      min-width: 70px;
    }
    .img-box {
      margin-bottom: 5px;
      margin-right: 5px;
    }
    .img-enlarge {
      z-index: 99999;
      position: fixed;
      background: #000000;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .share-img {
      width: 20px;
      // height: 20px;
    }
    .vux-tab-wrap {
      margin-bottom: 5px;
    }
    #item-list-box:before {
      content: initial;
    }
    #item-list-box {
      background: #ffffff;
      margin-bottom: 5px;
      font-size: 12px;
      border-radius: 10px;
      .main{
        padding-left:20%;
      }
      .weui-cell__ft {
        text-align: left;
        display: flex;
        flex-direction: column;
        width: 100%;
      }
      .img-list {
        display: flex;
        width: 95%;
        align-items: center;
        flex-wrap: wrap;
        padding-bottom: 10px;
        img{
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 200px;
          min-height: 70px;
          min-width: 70px;
        }
      }
      .foot {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 10px;
        span {
          margin-left: 20px;
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
        i {
          margin-right: 5px;
          font-size: 18px;
          color: #EFA79B;
        }
      }
      .con {
        line-height: 24px;
        padding-bottom: 10px;
        pre{
          white-space:pre-line;
        }
      }
      .type {
        color: #666666;
      }
      .focusman {
        height: 18px;
        // border: 1px solid #E5E5E5;
        padding: 0px 8px;
        color: #666666;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .left {
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position:relative;
        .attention{
          position: absolute;
          bottom:2px;
          right:9%;
          color: #D36566;
          border-radius:50%;
        }
      }
      .right {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .right-1 {
        display: flex;
        flex-direction: column;

      }
      .right-2 {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .bot {
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
      }
    }
    .likeList {
      font-size: 12px;

      .weui-cells  {
        padding: 10px;
        .vue-avatar--wrapper {
          display: inline-block !important;;
        }
      }
    }
    .commentList {
      font-size: 12px;
      .main {
        font-size: 12px;
      }
      .weui-cells {
        margin-top: 0;
      }
      .weui-cell__ft {
        text-align: left;
        width: 100%;
      }
      .top {
        width: 100%;
        min-height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          width: 20%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .right {
          font-size: 12px;
          width: 80%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .right-1 {
          display: flex;
          flex-direction: column;
          .floor{
            color:#BDBDBD
          }
          .nickname{
            color:#414042;
          }
          .con{
            padding-top:5px;
          }
        }
        .right-2 {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .changeImg {
      width: 70px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
  }
</style>


